<template>
	<a-modal :visible="props.visible" title="回收公海" :footer="false" :width="600" @cancel="cancelRecovery">
		<div class="flex items-center gap-2 bg-gray-200 p-2">
			<ExclamationCircleFilled style="font-size: 18px; color: #6e6e6e" />
			<div>回收后将回到选择的公海中，再次领取会有限制</div>
		</div>
		<div class="p-10">
			<a-form ref="formRef" :model="form" :rules="rules">
				<a-form-item label="选择公海" name="blueWaterId">
					<a-select v-model:value="form.blueWaterId" :options="customerFromOptions" @change="blueChange"></a-select>
				</a-form-item>
				<a-form-item label="回收原因" name="resson">
					<a-textarea v-model:value="form.resson" :rows="4"></a-textarea>
				</a-form-item>
			</a-form>
		</div>
		<div class="flex items-center justify-between">
			<div>已选{{ form.list.length }}个客户</div>
			<a-space>
				<a-button type="primary" :loading="subLoading" @click="confirmRecovery">确定</a-button>
				<a-button @click="cancelRecovery">取消</a-button>
			</a-space>
		</div>
	</a-modal>
</template>
<script setup>
	import customerHighSeasApi from '@/api/biz/crm/customerHighSeasApi'
	import customerApi from '@/api/biz/customerApi'
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array
		}
	})
	const emits = defineEmits(['update:visible', 'finished', 'cancel'])

	onBeforeMount(() => {
		form.value.list = props.list.map((item) => {
			return {
				id: item
			}
		})
	})
	const form = ref({
		blueWaterName: undefined,
		blueWaterId: undefined,
		resson: undefined,
		list: []
	})
	const rules = {
		resson: [{ required: true, message: '请输入回收原因', trigger: 'blur' }],
		blueWaterId: [{ required: true, message: '请选择回收公海', trigger: 'change' }]
	}
	const blueChange = (value, option) => {
		form.value.blueWaterName = option.label
	}
	/**
	 * 获取公海列表
	 */
	const customerFromOptions = ref([])
	customerHighSeasApi.list().then((res) => {
		customerFromOptions.value = res.map((item) => {
			return {
				value: item.id,
				label: item.name
			}
		})
	})

	/**
	 * 确认回收
	 */
	const formRef = ref()
	const subLoading = ref(false)
	const confirmRecovery = () => {
		formRef.value.validate().then(() => {
			subLoading.value = true
			customerApi
				.recovery(form.value)
				.then(() => {
					subLoading.value = false
					emits('update:visible', false)
					emits('finished')
				})
				.finally(() => {
					subLoading.value = false
				})
		})
	}

	/**
	 * 取消
	 */
	const cancelRecovery = () => {
		emits('update:visible', false)
		emits('cancel')
	}
</script>
